<template>
  <view class="container">
    <!-- 贷款额度和金额 -->
    <view class="loan-amount">
      <text class="title">贷款额度</text>
      <text class="amount">150000元</text>
    </view>

    <!-- 姓名、电话、地址、工作单位、身份证 -->
    <view class="personal-info-form">
      <input v-model="name" class="input-box" placeholder="请输入姓名" />
      <input v-model="phone" class="input-box" type="tel" placeholder="请输入电话" />
      <input v-model="address" class="input-box" placeholder="请输入地址" />
      <input v-model="workplace" class="input-box" placeholder="请输入工作单位" />
      <input v-model="idCard" class="input-box" placeholder="请输入身份证号码" />
    </view>
    
    <!-- 贷款申请表单 -->
    <view class="loan-form">
      <input v-model="loanAmount" class="input-box" type="number" placeholder="请输入贷款金额" />
      <input v-model="interestRate" class="input-box" type="number" placeholder="请输入利率（%）" />
      <input v-model="termInMonths" class="input-box" type="number" placeholder="请输入贷款期限（月）" />
      <input v-model="loanPurpose" class="input-box" placeholder="请输入贷款用途" />
      <input v-model="bankName" class="input-box" placeholder="请输入银行名称" />
      <input v-model="bankCode" class="input-box" placeholder="请输入银行代码" />
    
    </view>

    <!-- 立即贷款按钮 -->
    <view class="loan-button">
      <button class="btn" @click="submitLoan"">立即贷款</button>
    </view>

    <!-- 贷款成功提示 -->
    <view v-if="isLoanSuccess" class="loan-success-message">
      <text>贷款成功！</text>
    </view>

    <!-- 弹窗 -->
    <view v-if="isPopupVisible" class="popup-overlay" @click="hidePopup">
      <view class="popup" @click.stop>
        <text class="popup-title">需要贷款的数目</text>
        <input v-model="loanAmount" class="input-box" type="number" placeholder="请输入贷款数目" />
        <button class="submit-btn" @click="submitLoan">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // Personal information fields
      name: '', // 姓名
      phone: '', // 电话
      address: '', // 地址
      workplace: '', // 工作单位
      idCard: '', // 身份证号码

      // Loan application fields
      isPopupVisible: false, // 控制弹窗显示与隐藏
      loanAmount: '', // 存储输入的贷款数目
      interestRate: '', // 存储输入的利率
      termInMonths: '', // 存储输入的贷款期限
      loanPurpose: '', // 存储贷款用途
      bankName: '', // 存储银行名称
      bankCode: '', // 存储银行代码
      isLoanSuccess: false, // 控制贷款成功提示显示
    };
  },
  methods: {
    // 显示弹窗
    showPopup() {
      this.isPopupVisible = true;
    },
    // 隐藏弹窗
    hidePopup() {
      this.isPopupVisible = false;
    },
    // 提交贷款申请
    submitLoan() {
      if (this.name && this.phone && this.address && this.workplace && this.idCard &&
          this.loanAmount && !isNaN(this.loanAmount) && this.interestRate && !isNaN(this.interestRate) &&
          this.termInMonths && !isNaN(this.termInMonths) && this.loanPurpose && this.bankName && this.bankCode) {
        // 模拟贷款提交成功
        this.isLoanSuccess = true;
        // 隐藏贷款成功提示 3秒后
        setTimeout(() => {
          this.isLoanSuccess = false;
        }, 3000);
        // 关闭弹窗
        this.hidePopup();
      } else {
        // 如果任何字段为空或无效，提示用户
        wx.showToast({
          title: '请输入有效的信息',
          icon: 'none',
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loan-amount {
  text-align: center;
  margin-bottom: 50rpx; /* Adjusted spacing to suit placement */
}

.title {
  font-size: 64rpx;
  font-weight: bold;
  color: #333;
}

.amount {
  font-size: 80rpx;
  color: #ff6600;
  margin-top: 20rpx;
}

.personal-info-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.input-box {
  width: 100%;
  height: 50rpx;
  margin-bottom: 20rpx;
  padding: 10rpx;
  font-size: 24rpx;
  border: 1px solid #ccc;
  border-radius: 5rpx;
}

.submit-btn {
  width: 100%;
  height: 50rpx;
  background-color: #ff6600;
  color: white;
  font-size: 24rpx;
  border-radius: 5rpx;
}

.loan-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.loan-button {
  width: 100%;
  display: flex;
  justify-content: center;
}

.btn {
  width: 400rpx;
  height: 120rpx;
  background-color: #ff6600;
  color: white;
  font-size: 40rpx;
  border-radius: 60rpx;
  text-align: center;
}

.loan-success-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20rpx;
  background-color: #4CAF50;
  color: white;
  font-size: 32rpx;
  border-radius: 8rpx;
  text-align: center;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  width: 80%;
  max-width: 500rpx;
  background-color: white;
  padding: 40rpx;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-title {
  font-size: 26rpx;
  margin-bottom: 20rpx;
  color: #333;
}
</style>
